<template>
    <Dialog v-model="dialogVisible" :title="title">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        v-loading="formLoading"
        label-width="200px"
      >
        <el-form-item label="是否开启变灰" prop="base.greyOpen">
          <el-radio-group v-model="formData.base.greyOpen" class="ml-4">
            <el-radio :label="true" size="large">开启</el-radio>
            <el-radio :label="false" size="large">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="仅首页变灰" prop="base.onlyIndexGrey">
          <el-radio-group v-model="formData.base.onlyIndexGrey" class="ml-4">
            <el-radio :label="true" size="large">是</el-radio>
            <el-radio :label="false" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否允许推送" prop="base.allowPush">
          <el-radio-group v-model="formData.base.allowPush" class="ml-4">
            <el-radio :label="true" size="large">开启</el-radio>
            <el-radio :label="false" size="large">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推送密钥" prop="base.pushPass">
          <el-input
            v-model="formData.base.pushPass"
            type="password"
            show-password
            placeholder="推送密钥"
          />
        </el-form-item>
        <el-form-item label="推送目标栏目工作流审批" prop="base.allowPush">
          <el-radio-group v-model="formData.base.pushNeedCheck" class="ml-4">
            <el-radio :label="true" size="large">需要</el-radio>
            <el-radio :label="false" size="large">不需要</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="留言配置" prop="guestbook.isOpen">
          <el-radio-group v-model="formData.guestbook.isOpen" class="ml-4">
            <el-radio :label="true" size="large">开启</el-radio>
            <el-radio :label="false" size="large">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="留言是否需要登录" prop="guestbook.needLogin">
          <el-radio-group v-model="formData.guestbook.needLogin" class="ml-4">
            <el-radio :label="true" size="large">需要</el-radio>
            <el-radio :label="false" size="large">不需要</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="评论设置" prop="comment.commentStatus">
          <el-radio-group v-model="formData.comment.commentStatus" class="ml-4">
            <el-radio :label="1" size="large">开启</el-radio>
            <el-radio :label="0" size="large">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="评论需要审核" prop="comment.commentAudit">
          <el-radio-group v-model="formData.comment.commentAudit" class="ml-4">
            <el-radio :label="true" size="large">需要</el-radio>
            <el-radio :label="false" size="large">不需要</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="评论需要登录" prop="comment.commentNeedLogin">
          <el-radio-group v-model="formData.comment.commentNeedLogin" class="ml-4">
            <el-radio :label="true" size="large">需要</el-radio>
            <el-radio :label="false" size="large">不需要</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="评论周期" prop="comment.commentInterval">
          <el-input
            v-model="formData.comment.commentInterval"
            placeholder="评论周期,单位秒"
          />
        </el-form-item>
        <el-form-item label="	是否开启静态化" prop="staticPage.openSiteStaticPage">
          <el-radio-group v-model="formData.staticPage.openSiteStaticPage" class="ml-4">
            <el-radio :label="true" size="large">开启</el-radio>
            <el-radio :label="false" size="large">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否自动生成" prop="staticPage.openAuto">
          <el-radio-group v-model="formData.staticPage.openAuto" class="ml-4">
            <el-radio :label="true" size="large">开启</el-radio>
            <el-radio :label="false" size="large">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="栏目列表静态化最大页数" prop="staticPage.listMaxPageSize">
          <el-input
            v-model="formData.staticPage.listMaxPageSize"
            placeholder="栏目列表静态化最大页数"
          />
        </el-form-item>
        <el-form-item label="富文本图片最大宽度" prop="base.editorPicMaxWidth">
          <el-input
            v-model="formData.base.editorPicMaxWidth"
            placeholder="富文本图片最大宽度"
          />
        </el-form-item>
        <el-form-item label="内容版本开启" prop="base.contentVersionOpen">
          <el-radio-group v-model="formData.base.contentVersionOpen" class="ml-4">
            <el-radio :label="true" size="large">开启</el-radio>
            <el-radio :label="false" size="large">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容版本上限" prop="base.contentVersionUpperLimit">
          <el-input-number v-model="formData.base.contentVersionUpperLimit" :min="1" controls-position="right" />
        </el-form-item>
        <el-form-item label="已发布内容修改是否需要再次提交审核" prop="base.editPublishContentToSubmit">
          <el-radio-group v-model="formData.base.editPublishContentToSubmit" class="ml-4">
            <el-radio :label="true" size="large">需要</el-radio>
            <el-radio :label="false" size="large">不需要</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="混淆内容" prop="base.confuseContent">
          <el-radio-group v-model="formData.base.confuseContent" class="ml-4">
            <el-radio :label="true" size="large">开启</el-radio>
            <el-radio :label="false" size="large">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="阻止内容复制" prop="base.preventCopy">
          <el-radio-group v-model="formData.base.preventCopy" class="ml-4">
            <el-radio :label="true" size="large">开启</el-radio>
            <el-radio :label="false" size="large">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片水印设置" prop="watermark.watermarkSet">
          <el-radio-group v-model="formData.watermark.watermarkSet" class="ml-4">
            <el-radio :label="1" size="large">使用图片水印</el-radio>
            <el-radio :label="2" size="large">使用文字水印</el-radio>
            <el-radio :label="3" size="large">不使用水印</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="水印位置"
          prop="watermark.watermarkPosition"
          v-if="formData.watermark.watermarkSet != 3"
        >
          <el-select v-model="formData.watermark.watermarkPosition" placeholder="水印位置">
            <el-option label="左上" value="1" />
            <el-option label="上" value="2" />
            <el-option label="右上" value="3" />
            <el-option label="左" value="4" />
            <el-option label="中" value="5" />
            <el-option label="右" value="6" />
            <el-option label="左下" value="7" />
            <el-option label="下" value="8" />
            <el-option label="右下" value="9" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="水印文字"
          prop="watermark.watermarkTxt"
          v-if="formData.watermark.watermarkSet == 2"
        >
          <el-input v-model="formData.watermark.watermarkTxt" placeholder="请输入水印文字" />
        </el-form-item>
        <el-form-item
          label="水印文字颜色"
          prop="watermark.watermarkTxt"
          v-if="formData.watermark.watermarkSet == 2"
        >
          <div class="watermark-txt-color-block">
            <el-color-picker v-model="formData.watermark.watermarkTxtColour" />
          </div>
          <el-input v-model="formData.watermark.watermarkTxtColour" />
        </el-form-item>

        <el-form-item
          label="文字字体大小"
          prop="watermark.watermarkTxtSize"
          v-if="formData.watermark.watermarkSet == 2"
        >
          <el-input-number v-model="formData.watermark.watermarkTxtSize" :min="1" :max="100" />
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <!-- 按钮：保存 -->
      <XButton type="primary" :title="t('action.save')" @click="submitForm(formRef)" />
    </Dialog>
</template>
<script setup lang="ts">
defineOptions({ name: 'SiteConfigForm' })
import { getSiteBaseConfigApi, updateSiteBaseConfigApi } from '@/api/cms/site'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const title = ref('站点配置')
const dialogVisible = ref(false) // 弹窗的是否展示
// 表单校验
const rules = reactive({
  id: [required],
  base: {
    greyOpen: [required]
  },
  comment: {
    commentAudit: [required],
    commentInterval: [required],
    commentSet: [required],
    commentNeedLogin: [required]
  }
  // ,
  // staticPage: [required],
  // watermark: [required]
})
const formData = ref({
  id: 1,
  base: {
    greyOpen: true,
    onlyIndexGrey: false,
    thirdStatisticCode: '',
    resFtpIds: [],
    pushNeedCheck: false,
    editorPicMaxWidth: undefined,
    editPublishContentToSubmit: false,
    contentVersionOpen: false,
    contentVersionUpperLimit: 10,
    preventCopy:false,
    confuseContent:false
  },
  watermark: {
    watermarkSet: 3,
    watermarkResourceId: 1,
    watermarkPosition: 1,
    watermarkTxt: '',
    watermarkTxtColour: '',
    watermarkTxtSize: 12
  },
  staticPage: {
    openSiteStaticPage: false,
    staticPageFtpIds: [],
    openAuto: true,
    listMaxPageSize: 10000
  },
  comment: {
    commentAudit: false,
    commentInterval: 10,
    commentStatus: 3,
    commentNeedLogin: true
  },
  guestbook: {
    isOpen: false,
    needLogin: true
  }
})
const formRef = ref() // 表单 Ref
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const open = async (id: number) => {
  dialogVisible.value = true
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await getSiteBaseConfigApi(id)
    } finally {
      formLoading.value = false
    }
  }
}
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
// 提交按钮
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    await updateSiteBaseConfigApi(formData.value)
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
  dialogVisible.value = false
  // 发送操作成功的事件
  emit('success')
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
onMounted(() => {})
</script>
<style scoped>
.watermark-txt-color-block {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.el-form .el-input {
  width: 150px;
}
</style>
